<template>
  <div class="map-view">
    <div class="btn-left">
      <h3>光谷智慧交通</h3>
      <RealTime />
      <VideoSurvei />
      <EventAddition />
      <EventReview />
      <EventUpdate />
      <AnnounceView />
      <FrafficInform />
      <WorkBox />
      <ToolBox />
    </div>
    <div class="btn-right">
      <input type="text" placeholder="输入交通事件查询" v-model="searchText" />
      <button>查询</button>
      <button @click="toggleUserControl">用户管理</button>
      <UserControl v-if="showUserControl" />
      <div class="map-name">usermap</div>
    </div>
  </div>
  <div id="map"></div>
  <ZoomControls v-if="map" :map="map" />
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue'
import { gaode, image } from '../../ol-api/layers'
import RealTime from '../components/RealTime.vue'
import VideoSurvei from '../components/VideoSurvei.vue'
import EventAddition from '../components/EventAddition.vue'
import EventReview from '../components/EventReview.vue'
import EventUpdate from '../components/EventUpdate.vue'
import AnnounceView from '../components/AnnounceView.vue'
import FrafficInform from '../components/FrafficInform.vue'
import WorkBox from '../components/WorkBox.vue'
import ToolBox from '../components/ToolBox.vue'
import ZoomControls from '../components/ZoomControls.vue'
import UserControl from '../components/UserControl.vue'
import websocketService from '../services/websocketService'

const map = ref(null)
import { provide } from 'vue'
const docLayer = ref(null)
provide('docLayer', docLayer)
const showUserControl = ref(false)
const receivedMessages = ref([]) // 用于存储接收到的WebSocket消息

const toggleUserControl = () => {
  showUserControl.value = !showUserControl.value
}

onMounted(() => {
  // const gaodeMap = new ol.layer.Tile({ // 高德地图瓦片图层
  //         source: new ol.source.XYZ({ // XYZ瓦片数据源
  //             url: "http://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}", // 高德地图URL模板
  //             wrapX: false // 水平方向不重复
  //         })
  //     })
  map.value = new ol.Map({
    target: 'map',
    view: new ol.View({
      center: ol.proj.fromLonLat([114.3, 30.5]),
      zoom: 12,
      projection: 'EPSG:3857',
    }),
    layers: [gaode, image],
  })

  //在OL的地图基础上加载MAPGIS发布的地图文档
  docLayer.value = new Zondy.Map.Doc(
    '/api/maps/mapx/光谷智慧.mapx',
    'guanggu',
    {
      ip: 'localhost',
      port: '6163',
    }
  )
  map.value.addLayer(docLayer.value)

  // 提供 map 实例给子组件
  provide('mapInstance', map)

  // 连接到WebSocket服务器
  // 您需要将 'ws://localhost:8080' 替换为您的WebSocket服务器实际地址
  websocketService
    .connect('ws://localhost:8080')
    .then(() => {
      console.log('WebSocket连接已在TrafficmapView中建立。')
      // 设置消息处理器
      websocketService.onMessage((message) => {
        // 监听消息
        console.log('来自服务器的消息: ', message)
        receivedMessages.value.push(message) // 将接收到的消息添加到数组中
        // 在这里根据消息内容更新地图或执行其他操作
        // 例如: if (message.type === 'update_traffic') { updateMap(message.data); } // 如果消息类型是更新交通信息，则更新地图数据
      })
    })
    .catch((error) => {
      // 捕获连接错误
      console.error('TrafficmapView中的WebSocket连接错误:', error)
    })
})

onUnmounted(() => {
  websocketService.disconnect()
  console.log('WebSocket已在TrafficmapView中断开连接。')
})
</script>

<style lang="scss" scoped>
.map-view {
  position: fixed;
  z-index: 1000;
  top: 0;
  width: 100%;
  height: 40px;
  background-color: #fff;
  padding: 20px;
  display: flex;
  justify-content: space-between;
  gap: 20px;

  align-items: center;
  .btn-left {
    display: flex;
    //沿着y轴方向排列
    flex-direction: wrap;
    align-items: center;
    margin-left: 10px;
    gap: 15px;
    h3 {
      margin: 10px 0;
    }
  }
  .btn-right {
    display: flex;
    align-items: center;
    margin-right: 10px;
    input {
      width: 200px;
      height: 30px;
      padding: 5px;
      border-radius: 5px;
      border: 1px solid #ccc;
      margin-right: 10px;
    }
    button {
      width: 60px;
      height: 30px;
      background-color: #4caf50;
      color: #fff;
      border: none;
      border-radius: 5px;
      cursor: pointer;
    }
    .map-name {
      font-size: 14px;
      font-weight: 300;
      padding: 10px;
    }
  }
}
#map {
  width: 100vw;
  height: 100vh;
}
</style>
